<template>
  <div class="body">
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main class="main">
        <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          stretch="true"
          @tab-click="handleClick"
        >
          <el-tab-pane label="推荐" name="first"></el-tab-pane>
          <el-tab-pane label="时尚" name="second"></el-tab-pane>
          <el-tab-pane label="口红" name="third"></el-tab-pane>
          <el-tab-pane label="包包" name="fourth"></el-tab-pane>
          <el-tab-pane label="香水" name="fifth"></el-tab-pane>
          <el-tab-pane label="眼影" name="sixth"></el-tab-pane>
          <el-tab-pane label="粉底" name="seventh"></el-tab-pane>
          <el-tab-pane label="动漫" name="eighth"></el-tab-pane>
        </el-tabs>
        <div class="like">
          <div class="gzBox1" v-for="item in 9">
            <img src="@/assets/findImg/images/bb_05.jpg" alt="">
            <p>今天给大家安利几套早春套装合集</p>
            <p>elevn-t<span>❤ 42</span></p>
          </div>
        </div>
        <el-link type="warning" :underline="false" class="elLink">查看更多</el-link>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";

const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="scss" scoped>
.body{
  background-color: #f8f8f8;
}
.common-layout {
  width: 80%;
  margin: auto;
  background-color: #f8f8f8;
  .demo-tabs {
    border-radius: 20%;
    
  }
  .box-card{
    margin: 10px 15px;
  }
 .elLink{
    margin-left: 48%;
    margin-top: 20px;
 }
 .like{
    display: flex;
    justify-content: space-around;
    
    align-items: center;
    flex-wrap: wrap;
   
    .gzBox1 {
      width: 32%;
      box-shadow: 1px 1px 5px #666666;
      // background-color: gold;
      display: flex;
      flex-direction: column;
      margin: 5px;
      p{
        margin-left: 20px;
      }
      span{
        margin-left: 50px;
      }
    }
  }
}
</style>